<template>
  <div
    class="contentview-wrapper"
    v-show="isShowContent"
  >
    <transition name="slide-right">
      <div class="content">
        <div
          class="content-wrapper"
          v-if="bookAvailable"
        >
          <div
            class="content-item"
            v-for="(item, index) in navigation.toc"
            :key="index"
            @click="jumpTo(item.href)"
          >
            <span class="text">{{item.label}}</span>
            <div
              class="content-item2"
              v-for="(item1, index1) in item.subitems"
              :key="index1"
            >
              <span class="text">{{item1.label}}</span>
            </div>
          </div>
        </div>
        <div
          class="empty"
          v-else
        >加载中...</div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    isShowContent: {
      type: Boolean,
      default: false
    },
    navigation: Object,
    bookAvailable: Boolean
  },
  methods: {
    jumpTo (href) {
      this.$emit('jumpTo', href)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/global.scss';
.contentview-wrapper {
  .content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 102;
    width: 80%;
    height: 100%;
    background: #c7c7c7;
    .content-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .content-item {
        width: 90%;
        padding: px2rem(10) px2rem(15);
        border-bottom: px2rem(1) solid #b0b0b2;
        .text {
          font-size: px2rem(14);
          color: #333;
        }
        .content-item2 {
          width: 100%;
          padding-left: px2rem(20);
        }
      }
    }
    .empty {
      width: 100%;
      height: 100%;
      @include center;
      font-size: px2rem(16);
      color: #333;
    }
  }
}
</style>
